<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>view事件的监听 v-on</title>
</head>
<body>
    <script src="/js/vue.js"></script>
    <div id ="app">
        <!-- 在前端开发中，我们经常要做的事情，事件的监听，经常要进行交互-->
        <!-- 比如单击、拖拽、键盘敲击、鼠标滑动等-->
        <!-- 我们知道发生这个事情，与之进行一些逻辑的操作，就需要事件的监听，在vue实现通过v-on的指令-->

        <!--
            绑定事件监听器 语法糖 简写 @
            可以定义为functio|inline statement|object
            参数为event
        -->
        <!-- v-on指令是用来绑定DOM事件监听-->
       <p>{{counter}}</p>
       <button v-on:click="counter++">+</button>
       <button v-on:click="counter--">-</button>
       <p>--------------------------------</p>
       <!-- 函数没有参数的时候，是可以省略（），且如果需要参数，默认为事件本身event-->
       <!-- 如果有参数，则不可以省略，否则为undefined -->
       <button @click="increase()">+</button>
       <button @click="decrease()">-</button>
    </div>
    
    <script>
       let app =new Vue({
         el:"#app",
         data:{
           msg:'hello world',
           counter:0
         },
         methods:{       // -->{}   代表着对象
            increase(a){  //:function可以省略
                //默认有event参数，为事件本身
                console.log(a);
                this.counter++
            },
            decrease(){
                this.counter--
            }
         },
       })
    </script>  
</body>
</html>